"use client";

import { AIChatPlugin } from "@platejs/ai/react";
import {
  type CursorData,
  type CursorOverlayState,
  useCursorOverlay,
} from "@platejs/selection/react";
import { RangeApi } from "platejs";
import { usePluginOption } from "platejs/react";

import { cn } from "@/lib/utils";

export function CursorOverlay() {
  const { cursors } = useCursorOverlay();

  return (
    &lt;&gt;
      {cursors.map((cursor) =&gt; (
        &lt;Cursor key={cursor.id} {...cursor} /&gt;
      ))}
    &lt;/&gt;
  );
}

function Cursor({
  id,
  caretPosition,
  data,
  selection,
  selectionRects,
}: CursorOverlayState&lt;CursorData&gt;) {
  const streaming = usePluginOption(AIChatPlugin, "streaming");
  const { style, selectionStyle = style } = data ?? ({} as CursorData);
  const isCursor = RangeApi.isCollapsed(selection);

  if (streaming) return null;

  return (
    &lt;&gt;
      {selectionRects.map((position, i) =&gt; {
        return (
          <div style="{{" />
        );
      })}
      {caretPosition && (
        <div style="{{" />
      )}
    &lt;/&gt;
  );
}
